<template>
  <div style="width: 100%; height: 100%">
    <el-container class="ElContainer">
      <!-- <el-header class="ElHeaderStyle">
        <h1>教学无忧教师端</h1>
      </el-header> -->
      <el-container class="ElContainer">
        <el-aside class="ElContainerAside">
          <hr>
          <div class="RouteLinkContain">
            <router-link class="RouterLinkStyle" to="/page/teacher/classes">
              教师班级
            </router-link>
          </div>
          <hr>
          <div class="RouteLinkContain">
            <router-link class="RouterLinkStyle" to="/page/teacher/score">
              教师分数
            </router-link>
          </div>
          <hr>
          <div class="RouteLinkContain">
            <router-link class="RouterLinkStyle" to="/page/teacher/subject">
              教师课程
            </router-link>
          </div>
          <hr>
          <div class="RouteLinkContain">
            <router-link class="RouterLinkStyle" to="/page/teacher/examination">
              教师考试
            </router-link>
          </div>
          <hr>
        </el-aside>
        <el-main class="ELContainerMain">
          路由展示
          <router-view name="TeacherPageRouter"></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
</script>

<style>
.ElHeaderStyle {
  width: 100%;
  height: 50px;
  background-color: rgb(238, 251, 253);
}
.ElContainer {
  width: 100%;
  height: 980px;
  background-color: rgb(240, 237, 233);
}
.ElContainerAside {
  float: left;
  background-color: rgb(240, 238, 236);
  height: 100%;
  width: 20%;
}
.ELContainerMain {
  float: right;
  height: 100%;
  width: 80%;
  background-color: rgb(215, 230, 235);
}
.RouteLinkContain {
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  background-color: rgb(110, 117, 129);
  border-color: goldenrod;
}
.RouteLinkContain:hover {
  background-color: rgb(151, 236, 218);
}
.RouteLinkContain:active {
  background-color: crimson;
}
.RouterLinkStyle {
  text-decoration: none;
  color: honeydew;
}
</style>